import React, { useRef, useEffect, useState } from "react";
import "./canvasBg.scss";
import zrlogo from "../../../assets/images/zrlogo.png";
import { Button, Form, Input } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { msg } from "@/utils";
import { useNavigate } from "react-router-dom";
import { useAppStore } from "@/stores";

// 超管用户信息
const superAdminInfo = {
  username: "super",
  unitName: "杭州魔丸科技",
};
const userInfo = {
  username: "user",
  unitName: "杭州魔丸科技",
};

const adminInfo = {
  username: "admin",
  unitName: "杭州魔丸科技",
};

const captchaInfo = {
  id: "",
  img: "",
};

const FormData = () => {
  const { setUserInfo } = useAppStore();
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
  const navigate = useNavigate();
  useEffect(() => {}, []);

  const onFinish = (val) => {
    console.log(val);

    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      msg("登录成功");
      navigate("/home");
      setUserInfo({
        username: val.username,
        unitName: "登录角色",
      });
    }, 2000);
  };

  const onFinishFailed = () => {
    msg("登录失败", "error");
  };

  return (
    <div className="login-form g-relative">
      <img style={{ width: "90px", margin: "0 auto", display: "block" }} src={zrlogo} alt="" />
      <h1 className="g-tc g-c-white g-m-b-10 g-fs-32 g-m-b-50">欢迎使用配置中心平台</h1>
      <Form
        name="basic"
        form={form}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label=""
          name="username"
          rules={[
            {
              required: true,
              message: "请输入用户名",
            },
          ]}
        >
          <div className="color_outBox">
            <div className="colorInput buttonRight">
              <Input
                placeholder="请输入账号"
                //  defaultValue='admin'
                prefix={<UserOutlined />}
                allowClear
                style={{ height: "40px", border: "0" }}
              />
            </div>
          </div>
        </Form.Item>

        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: "请输入密码",
            },
          ]}
        >
          <div className="color_outBox">
            <div className="colorInput">
              <Input.Password
                placeholder="请输入密码"
                // defaultValue='123456'
                prefix={<LockOutlined />}
                style={{ height: "40px", border: "0" }}
              />
            </div>
          </div>
        </Form.Item>

        <Form.Item label={null}>
          <div className="color_outBox">
            <div className="colorInput">
              <Button
                loading={loading}
                style={{
                  width: "100%",
                  borderRadius: "0",
                  backgroundColor: "#4989ff",
                }}
                type="primary"
                htmlType="submit"
                block
                size="large"
              >
                登陆
              </Button>
            </div>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
};

export default FormData;
